@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    font-size: 0;
}

@mixin flexTool {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin borderbtn {
    border-bottom: 3px solid #1abc9c;
    
}

.dg_border-side {
    width: 1280px;
    margin: 0 auto;
    header {
        width: 1280px;
        margin: 0 auto;
        margin-bottom: 30px;
        background-color: white;
        //顶部标题
        .dg_top_title {
            @include flexTool;
            justify-content: flex-end;
            margin-right: -31px;
            ul {
                color: #b3b2b2;
                @include flexTool;
                align-items: none;
                justify-content: none;
                margin-top: 15px;
                margin-right: 72px;
                li {
                    margin-right: 4px;
                    font-size: 13px;
                }
            }
        }
        //导航栏
        .dg_nav {
            .dg_logoImg {
                width: 254px;
                height: 38px;
                margin-left: 179px;
                margin-bottom: 7px;
                display: inline-block;
                margin-right: 114px;
                margin-top: 27px;
            }
            .dg_nav_items {
                display: inline-block;
                margin-top: 21px;
                ul {
                    display: flex;
                    li {
                        font-size: 12px;
                        font-weight: 600;
                        padding: 0 9px 0 9px;
                        a {
                            font-size: 12px;
                            font-weight: 600;
                            padding: 0 9px 0 9px;
                            color: black;
                            &:visited{
                                color: black;
                            }
                        }
                    }
                    li:first-child {
                        margin-right: 17px;
                    }
                    li:nth-child(2) {
                        margin-right: 28px;
                    }
                    li:nth-child(3) {
                        margin-right: 25px;
                    }
                    li:nth-child(4) {
                        margin-right: 26px;
                    }
                    li:nth-child(5) {
                        margin-right: 26px;
                    }
                    li:nth-child(6) {
                        margin-right: 26px;
                    }
                    li:nth-child(7) {
                        margin-right: 26px;
                    }
                    li:nth-child(8) {
                        margin-right: 24px;
                    }
                    .home {
                        @include borderbtn;
                    }
                }
            }
        }
    }
    section {
        .dg_mode1 {
            .dg_top {
                background-image: url(../img/index/背景2.png);
                background-repeat: no-repeat;
                background-position-y: -110px;
                //          background-size: 100% 100%;
                width: 1280px;
                margin: 0 auto;
                padding-top: 132px;
                //              padding-bottom: 217px;
                .dg_ep_img {
                    display: inline-block;
                    &:before {
                        width: 557px;
                        height: 485px;
                        display: inline-block;
                        content: url("../img/index/图层 5.png");
                    }
                }
                .dg_buy {
                    display: inline-block;
                    width: 516px;
                    //             margin-left: 490px;
                    vertical-align: top;
                    padding-top: 49px;
                    h1 {
                        font-size: 21px;
                        color: white;
                        margin-bottom: 36px;
                        text-align: right;
                    }
                    h2 {
                        font-size: 25px;
                        color: white;
                        text-align: right;
                    }
                    .dg_way {
                        text-align: right;
                        margin-top: 72px;
                        input:first-child {
                            width: 170px;
                            height: 56px;
                            background-color: #1abc9c;
                            border-radius: 10px;
                            border: none;
                            font-size: 13px;
                            color: white;
                            font-weight: 600;
                        }
                        input:last-child {
                            width: 170px;
                            height: 56px;
                            background-color: #3498db;
                            border-radius: 10px;
                            border: none;
                            margin-left: 16px;
                            font-size: 13px;
                            color: white;
                            font-weight: 600;
                        }
                    }
                }
            }
            .dg_bottom {
                width: 1280px;
                margin: 0 auto;
                padding-left: 155px;
                .dg_txt {
                    display: inline-block;
                    width: 627px;
                    margin-top: 107px;
                    vertical-align: top;
                    p {
                        font-size: 18px;
                        color: #34495e;
                        font-weight: 600;
                        margin-bottom: 28px;
                    }
                    span {
                        font-size: 12px;
                        color: #4a5b6d;
                        line-height: 23px;
                    }
                }
                &::after {
                    content: url(../img/index/123.png);
                    display: inline-block;
                    margin-top: -90px;
                }
            }
        }
        .dg_mode2 {
            width: 1280px;
            margin: 0 auto;
            background-color: #38373d;
            padding-top: 33px;
            padding-bottom: 105px;
            .dg_m_title {
                margin-bottom: 40px;
                h1 {
                    font-size: 19px;
                    color: white;
                    text-align: center;
                }
                h3 {
                    font-size: 17px;
                    color: white;
                    text-align: center;
                }
            }
            .dg_m_items {
                ul {
                    margin-left: 166px;
                    display: flex;
                    .dg_m_item_install {
                        width: 245px;
                        text-align: center;
                        margin-right: 103px;
                        div {
                            width: 118px;
                            margin: 0 auto;
                        }
                        .dg_p {
                            font-size: 16px;
                            color: white;
                            margin-top: 27px;
                            margin-bottom: 27px;
                        }
                        .dg_content {
                            width: 245px;
                            p {
                                font-size: 14px;
                                color: white;
                            }
                        }
                    }
                    .dg_m_item_design {
                        width: 245px;
                        text-align: center;
                        display: inline-block;
                        margin-right: 103px;
                        div {
                            width: 118px;
                            margin: 0 auto;
                        }
                        .dg_p {
                            font-size: 16px;
                            color: white;
                            margin-top: 27px;
                            margin-bottom: 27px;
                        }
                        .dg_content {
                            width: 245px;
                            p {
                                font-size: 14px;
                                color: white;
                            }
                        }
                    }
                    .dg_m_item_protect {
                        width: 245px;
                        text-align: center;
                        div {
                            width: 118px;
                            margin: 0 auto;
                        }
                        .dg_p {
                            font-size: 16px;
                            color: white;
                            margin-top: 27px;
                            margin-bottom: 27px;
                        }
                        .dg_content {
                            width: 245px;
                            p {
                                font-size: 14px;
                                color: white;
                            }
                        }
                    }
                }
            }
        }
        .dg_mode3 {
            background-color: white;
            width: 1280px;
            margin: 0 auto;
            .dg_m3_title {
                margin: 0 auto;
                width: 611px;
                padding-top: 49px;
                border-bottom: 2px solid #e7e7e7;
                margin-bottom: 43px;
                ul {
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    margin-bottom: 20px;
                    li {
                        h1 {
                            color: #626c76;
                            font-size: 24px;
                        }
                    }
                    li:last-child {
                        margin-left: 28px;
                    }
                }
            }
            .dg_news_item {
                width: 900px;
                margin: 0 auto;
                margin-bottom: 100px;
                ul {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    align-items: center;
                    li {
                        div {
                            display: inline-block;
                            &:last-child {
                                width: 276px;
                                vertical-align: top;
                                margin-top: 25px;
                                line-height: 17px;
                                margin-left: 21px;
                                span {
                                    font-size: 14px;
                                    color: #5f5f61;
                                    &:last-child {
                                        float: right;
                                    }
                                }
                            }
                        }
                        &:nth-child(3) {
                            margin: 31px 0 31px 0;
                        }
                    }
                }
            }
        }
        .dg_mode4 {
            width: 1280px;
            margin: 0 auto;
            background-image: url(../img/index/beijing_02.png);
            padding-top: 16px;
            padding-bottom: 60px;
            .dg_m4_title {
                border-bottom: 2px solid white;
                width: 612px;
                margin: 0 auto;
                p {
                    color: white;
                    font-size: 25px;
                    text-align: center;
                    margin-bottom: 16px;
                    margin-top: 16px;
                }
            }
            .dg_m4_type {
                width: 1180px;
                margin: 0 auto;
                display: flex;
                word-wrap: wrap;
                justify-content: space-between;
                div {
                    &:first-child {
                        margin-top: 141px;
                    }
                    &:nth-child(2) {
                        margin-top: 32px;
                    }
                    &:nth-child(3) {
                        margin-top: 141px;
                    }
                }
                &::before {
                    content: url("../img/index/icon 拷贝.png");
                    margin-top: 230px;
                }
                &::after {
                    content: url("../img/index/icon.png");
                    margin-top: 230px;
                }
            }
        }
        .dg_mode5 {
            width: 1280px;
            height: 84px;
            background-color: #ebecec;
            margin: 0 auto;
        }
    }
    footer {
        width: 1280px;
        margin: 0 auto;
        .dg_ft_mess {
            height: 396px;
            background-color: #38373d;
            padding-top: 61px;
            .dg_ft_content {
                margin: 0 auto;
                width: 894px;
                .dg_ft_mess_left {
                    display: inline-block;
                    //              margin: 0 auto;
                    vertical-align: top;
                    margin-top: 130px;
                    margin-right: 21px;
                    .dg_ft_code {
                        display: inline-block;
                        margin-right: 22px;
                        .dg_ft_mess_left_img {
                            width: 119px;
                            height: 119px;
                            margin: 0 auto;
                            margin-bottom: 9px;
                        }
                        p {
                            color: white;
                            transform: scale(0.9);
                            font-size: 12px;
                        }
                    }
                    .dg_ft_callway {
                        display: inline-block;
                        vertical-align: top;
                        ul {
                            li {
                                font-size: 14px;
                                color: white;
                            }
                        }
                        ul:first-child {
                            margin-bottom: 19px;
                        }
                        ul:nth-child(2) {
                            display: flex;
                            li {
                                .dg_phone {
                                    width: 14px;
                                    height: 20px;
                                }
                            }
                            li:first-child {
                                margin-right: 18px;
                            }
                        }
                        ul:nth-child(3) {
                            display: flex;
                            margin-bottom: 14px;
                            margin-left: 32px;
                        }
                        ul:nth-child(4) {
                            margin-bottom: 14px;
                            display: flex;
                            li {
                                .dg_email {
                                    width: 21px;
                                    height: 14px;
                                }
                            }
                            li:first-child {
                                margin-right: 10px;
                            }
                        }
                        ul:nth-child(5) {
                            display: flex;
                            li {
                                .dg_locat {
                                    width: 13px;
                                    height: 20px;
                                }
                            }
                            li:first-child {
                                margin-right: 18px;
                            }
                        }
                    }
                }
                .dg_ft_mess_right {
                    display: inline-block;
                    ul {
                        li {
                            font-size: 13px;
                            color: white;
                        }
                    }
                    ul:nth-child(2) {
                        display: flex;
                        margin-top: 12px;
                        margin-bottom: 12px;
                        li {
                            input {
                                height: 40px;
                                width: 170px;
                                border: none;
                                background-color: #5d6d7e;
                                border-radius: 10px;
                                font-size: 12px;
                                padding-top: 2px;
                                padding-left: 11px;
                                &::-webkit-input-placeholder {
                                    color: #bec5cb;
                                }
                            }
                        }
                        li:nth-child(2) {
                            margin-left: 21px;
                            input {
                                height: 40px;
                                width: 200px;
                                border: none;
                                background-color: #5d6d7e;
                                border-radius: 10px;
                                font-size: 12px;
                                padding-top: 2px;
                                padding-left: 11px;
                                &::-webkit-input-placeholder {
                                    color: #bec5cb;
                                }
                            }
                        }
                    }
                    ul:nth-child(3) {
                        margin-bottom: 11px;
                        li {
                            input {
                                height: 40px;
                                background-color: #5d6d7e;
                                width: 391px;
                                border: none;
                                border-radius: 10px;
                                font-size: 12px;
                                padding-top: 2px;
                                padding-left: 11px;
                                &::-webkit-input-placeholder {
                                    color: #bec5cb;
                                }
                            }
                        }
                    }
                    ul:nth-child(4) {
                        li {
                            textarea {
                                width: 391px;
                                background-color: #5d6d7e;
                                height: 144px;
                                border: none;
                                border-radius: 10px;
                                resize: none;
                                font-size: 12px;
                                padding-top: 23px;
                                padding-left: 10px;
                                &::-webkit-input-placeholder {
                                    color: #bec5cb;
                                }
                            }
                        }
                    }
                    ul:nth-child(5) {
                        text-align: right;
                        li {
                            input {
                                border-radius: 10px;
                                height: 30px;
                                width: 98px;
                                text-align: center;
                                font-size: 12px;
                                color: white;
                                background-color: #3498db;
                            }
                        }
                    }
                }
            }
        }
        .dg_trangle {
            text-align: center;
            height: 26px;
            background-color: #38373d;
            &::before {
                content: "";
                border-top: 12px solid transparent;
                border-left: 13px solid transparent;
                border-right: 5px solid #2C3E50;
                border-bottom: 28px solid #2c3e50;
            }
            &:after {
                content: "";
                border-top: 12px solid transparent;
                border-left: 5px solid #2c3e50;
                border-right: 13px solid transparent;
                border-bottom: 28px solid #2c3e50;
            }
        }
        .dg_footer {
            background-color: #2c3e50;
            content: "";
            margin: 0 auto;
            .dg_ft_title1_left {
                padding-top: 45px;
                padding-bottom: 37px;
                ul {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 5px;
                    li {
                        font-size: 12px;
                        color: #d2d2d5;
                    }
                }
                p {
                    font-size: 12px;
                    text-align: center;
                    color: #d2d2d5;
                }
            }
        }
    }
}